<template>
  <div id="app">
   <m-table :list-title="listTitle" :list-data="listData"></m-table>
  </div>
</template>

<script>
import "bootstrap/dist/css/bootstrap.min.css"

import MTable from './components/Mtable.vue'

export default {
  name: 'App',
  components: {
    MTable
  },
  data(){ 
    return {
      listTitle: [
          'Order Number',
          'Name',
          'Age',
          'Major'
        ],
      listData: [
          {
            name: '小明',
            age: 20,
            major: '计算机',
          },
          {
            name: '小王',
            age: 20,
            major: '计算机',
          },
          {
            name: '小李',
            age: 20,
            major: '计算机',
          },
          {
            name: '小白',
            age: 20,
            major: '计算机',
          },
          {
            name: '小杨',
            age: 20,
            major: '计算机',
          },
          {
            name: '小A',
            age: 20,
            major: '计算机',
          },
          {
            name: '小C',
            age: 20,
            major: '计算机',
          },
          {
            name: '小朱',
            age: 20,
            major: '计算机',
          },
          {
            name: '小fj',
            age: 20,
            major: '计算机',
          },
        ],
      }
      },
      created() {
        this.listData = this.listData.map((v, i) => {
          v.order = i;
          return v;
        })
  }
}
</script>